<template>
	<uni-popup ref="videoPopupRef" type="bottom" :mask-click="false" :safe-area="false">
		<view class="video_popup">
			<view class="video_popup_header">
				<uni-icons color="#fff" type="left" size="24" @tap="close"></uni-icons>
			</view>
			<video v-if="videoUrl" class="video_popup_content" :src="videoUrl" :direction="0" :autoplay="true" object-fit="contain" :show-fullscreen-btn="false"></video>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	const videoUrl = ref()
	const videoPopupRef = ref()
	
	
	const open = (url) => {
		videoPopupRef.value.open()
		setTimeout(() => {
			videoUrl.value = url
		}, 500)
	}
	const close = () => {
		videoUrl.value = ''
		videoPopupRef.value.close()
	}
	
	defineExpose({open})
</script>

<style lang="scss" scoped>
	.video_popup {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		background-color: #1a1a1a;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: relative;
		z-index: 999;
		
		.video_popup_header {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			box-sizing: border-box;
			padding: 16rpx;
		}
		
		.video_popup_content {
			width: 100%;
			height: 45vh;
			margin-top: 27.5vh;
		}
	}
</style>